<script setup lang="ts">
import { ref, reactive } from 'vue';

const emit = defineEmits(['replyMsg']);

defineProps({
  params: {
    type: Object,
    default: {},
  },
});

const info: any = reactive({
  msg: '',
  maxLen: 140,
});

const subReplyComment = () => {
  emit('replyMsg', info['msg']);
};

watch(
  () => info['msg'],
  () => {
    info['msg'] =
      info['maxLen'] >= info['msg']
        ? info['msg']
        : info['msg'].substring(0, info['maxLen']);
  }
);
</script>

<template>
  <div class="reply-comment">
    <h3>我回复@{{ params.user.nickname }}:</h3>
    <div class="comment_textarea">
      <div class="pre">{{ info.msg }}</div>
      <textarea
        class="J_inpBox inp-paragraph"
        name="leave_msg"
        id="leave_msg"
        placeholder="期待你的神评论……"
        v-model="info.msg"
      ></textarea>
    </div>
    <div class="comment_box_footer">
      <span class="comment_limit"
        ><em class="num">{{ info.msg.length }}</em
        >/{{ info.maxLen }}</span
      >
      <el-button type="primary" color="#ff641e" @click="subReplyComment"
        >评论</el-button
      >
    </div>
  </div>
</template>

<style scoped lang="scss">
.reply-comment {
  font-size: var(--el-font-size-base);
  padding: 10px 15px;
  background: var(--el-bg-color-page);
  border-radius: 6px;
  box-shadow: 0 0px 27px rgb(0 0 0 / 6%) inset;

  h3 {
    line-height: 14px;
    padding-bottom: 10px;
    font-size: var(--el-font-size-base);
    font-weight: normal;
    color: var(--el-text-color-primary);
  }
}
.comment_textarea {
  position: relative;
  border: 1px solid var(--el-bg-color-page);
  border-radius: 4px;
  background: var(--el-bg-color);
}

.pre {
  visibility: hidden;
}

.inp-paragraph {
  position: absolute;
  top: 0;
  left: 0;
  height: calc(100% - 20px);
  resize: none;
  width: auto;
  padding: 0;
  border: 0;
  margin: 0;
  font-family: inherit;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

.inp-paragraph,
.pre {
  width: calc(100% - 30px);
  padding: 10px 15px;
  line-height: 24px;
  min-height: 24px;
  font-size: 14px;
  color: var(--el-text-color-primary);

  border-radius: 4px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.comment_box_footer {
  padding: 15px 0 0;
  text-align: right;
}

.comment_limit {
  display: inline-block;
  line-height: 28px;
  padding: 0 20px;
  font-size: 14px;
  color: var(--el-text-color-primary);

  em {
    font-style: normal;
  }
}
</style>
